<template>
	<view class="order">
		<!-- tab 栏 -->
		<view class="tabBox" :style="{backgroundImage:'url('+baseUrl+'static/index/bg1.png'+')'}">
			<view class="fixbox">
				<view class="card">
					<view class="card_1">
						<view class="my">应补总额</view>
						<view class="curr">{{all.all_perk_money||0}}</view>
					</view>
					<view class="card_1">
						<view class="my">已发放</view>
						<view class="curr">{{all.stop_perk_money||0}}</view>
					</view>
					<view class="card_1">
						<view class="my">未发放</view>
						<view class="curr">{{all.not_perk_money||0}}</view>
					</view>
				</view>
				<view class="tit">
					补贴明细
				</view>
			</view>
			<view class="listBox">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="list_l">
						<view class="list_l_r">
							<view class="name">{{item.createtime||'-'}}</view>
						</view>
					</view>
					<view class="list_r">
						{{item.type == 1 ? '平台发放 ' : '购买会员卡赠送 '}}+{{item.money||0}}
					</view>
				</view>
				<view class="more" @tap.stop="getMore">
					{{isText}}
				</view>
			</view>
			<view class="fixbot"></view>
		</view>
		<view class="line">
			<image :src="baseUrl+'static/index/line.png'" mode=""></image>
		</view>
		<!-- 列表 -->
		<view class="useBox" :style="{backgroundImage:'url('+baseUrl+'static/index/bg3.png'+')'}">
			<view class="tit">
				<view class="tit_l">
					使用明细
				</view>
				<view class="tit_r">
					剩余可用：{{all.perk_money||0}}
				</view>
			</view>
			<view class="list" v-for="(item,index) in useList" :key="index">
				<view class="dot">
				</view>
				<view class="list_l">
					<view class="list_l_r">
						<view class="name">订单号：{{item.order_no||'-'}}</view>
						<view class="time">
							{{item.createtime_text||''}}
						</view>
					</view>
				</view>
				<view class="list_r">
					{{item.perk_money||'-0.00'}}
				</view>
			</view>
			<view  class="more"  @tap.stop="useMore">
				{{useText}}
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import config from '@/common/config/config';
	export default {
		data() {
			return {
				baseUrl: config.baseurl,
				page: 1,
				usePage: 1,
				list: [],
				useList: [],
				isText: '',
				useText: '',
				all: {},
				k: false,
				u: false,
			};
		},
		onLoad() {},
		onShow() {
			this.init()
			this.loadData()
		},
		methods: {
			// 初始
			init() {
				this.page = 1
				this.usePage = 1
				this.isText = ''
				this.useText = ''
				this.list = []
				this.useList = []
			},
			// 更多补贴
			getMore() {
				if (this.k) return
				this.page += 1
				this.getList()
			},
			// 更多明细
			useMore() {
				if (this.u) return
				this.usePage += 1
				this.getDetails()
			},
			// 获取总额
			async loadData() {
				await uni.request({
					url: '/wanlshop/user/refresh',
					method: 'POST',
					success: res => {
						this.all = res.data.perk
						this.getList()
						this.getDetails();
					}
				});
			},
			// 补贴明细列表
			async getList() {
				let that = this
				await uni.request({
					url: '/wanlshop/user/perkList',
					method: 'POST',
					data: {
						page: this.page
					},
					success: res => {
						that.list = that.list.concat(res.data.data)
						if (res.data.total == that.list.length) {
							that.isText = '暂无数据'
							that.k = true
						} else {
							that.isText = '获取更多'
						}
						// console.log(that.list, 'that.list')
					}
				})
			},
			// 使用明细列表
			async getDetails() {
				let that = this
				await uni.request({
					url: '/wanlshop/user/perkMoneyLog',
					data: {
						page: that.usePage
					},
					success: res => {
						that.useList = that.useList.concat(res.data.data)
						if (res.data.total == that.useList.length) {
							that.useText = '暂无数据'
							that.u = true
						} else {
							that.useText = '获取更多'
						}
					}
				});
			},
		},
	}
</script>

<style lang="less">
	page {
		background-color: #252525;
	}

	.u-tab-bar {
		display: none !important;
	}

	.more {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		margin-top: 20rpx;
	}

	.order {
		width: 100vw;

		.line {
			position: absolute;
			left: 24%;
			top: 57.8%;
			z-index: 3000;
			width: 380rpx;
			height: 60rpx;

			image {
				width: 400rpx;
				height: 70rpx;
			}
		}

		.tabBox {
			width: 90vw;
			// max-height: 58vh;
			height: 58vh;
			color: #663409;
			background-size: 100% 100%;
			margin: 20rpx auto;
			overflow-y: auto;
			border-radius: 20rpx;
			z-index: 10;

			.fixbox {
				position: sticky;
				top: 0;
				z-index: 100;
				background: linear-gradient(to right, #fef5ce, #fbedbc);
				background-size: 100% 100%;
			}

			.fixbot {
				position: sticky;
				bottom: 0;
				z-index: 100;
				height: 30rpx;
				background: linear-gradient(to right, #fef5ce, #fbedbc);
				background-size: 100% 100%;
			}


			.card {
				width: 100%;
				height: 18%;
				display: flex;
				padding: 30rpx 50rpx;
				padding-bottom: 10rpx;
				justify-content: space-between;

				.card_1 {
					text-align: center;
					align-items: center;
					font-size: 32rpx;
					font-weight: 600;

					.curr {
						padding-right: 10rpx;
						margin-top: 16rpx;
					}
				}
			}

			.tit {
				width: 100%;
				padding: 10rpx 40rpx;
			}
		}

		.useBox {
			width: 90vw;
			height: 37vh;
			// max-height: 37vh;
			margin: 20rpx auto;
			border-radius: 20rpx;
			color: #252525;
			background-size: 100% 100%;
			overflow-y: auto;

			.dot {
				width: 11rpx;
				height: 10rpx;
				background: #000;
				border-radius: 50%;
				margin: 20rpx;
			}

			.tit {
				width: 100%;
				padding: 30rpx 40rpx 10rpx;
				display: flex;
				justify-content: space-between;
				position: sticky;
				top: 0;
				background: linear-gradient(to right, #fbfbfb, #bebebe);
			}

			// .titbot {
			// 	position: sticky;
			// 	bottom: 0;
			// 	z-index: 100;
			// 	height:20rpx;
			// 	background: linear-gradient(to right, #fbfbfb, #bebebe);
			// 	background-size: 100% 100%;
			// }
			.tit_r {
				font-weight: 600;
			}

			.list {
				width: 100%;
				height: auto;
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				align-item: center;

				.list_l {
					width: 70%;
					display: flex;

					.list_l_r {
						font-size: 28rpx;
						font-weight: 400;

						.name {
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
						}

						.time {
							font-size: 26rpx;
							color: #666666;
							height: 40rpx;
							line-height: 40rpx;
						}
					}
				}

				.list_r {
					width: 30%;
					font-size: 26rpx;
					text-align: right;
					margin-right: 20rpx;

					.time {
						color: #979797;
						margin-bottom: 10rpx;
					}
				}
			}
		}

		.listBox {
			width: 95%;
			margin: 10rpx auto;

			.list {
				width: 100%;
				height: auto;
				border-radius: 20rpx;
				margin: 10rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.list_l {
					width: 50%;
					display: flex;

					image {
						width: 84rpx;
						height: 84rpx;
						border-radius: 50%;
					}

					.list_l_r {
						font-size: 28rpx;
						font-weight: 400;
						margin-left: 20rpx;

						.name {
							height: 50rpx;
							line-height: 50rpx;
							display: flex;
						}
					}
				}

				.list_r {
					width: 48%;
					text-align: right;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>